<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库管理界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .form-group {
            margin-bottom: 15px;
        }
        button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>数据库管理界面</h1>
        
        <div class="tabs">
            <button onclick="showTab('users')">用户管理</button>
            <button onclick="showTab('groups')">用户组管理</button>
            <button onclick="showTab('questions')">题目管理</button>
            <button onclick="showTab('options')">选项管理</button>
            <button onclick="showTab('answers')">答案管理</button>
            <button onclick="showTab('students')">学生管理</button>
        </div>
        
        <div id="questions" class="tab-content">
            <h2>题目管理</h2>
            <div class="form-group">
                <input type="text" id="questionContent" placeholder="题目内容">
                <button onclick="addQuestion()">添加题目</button>
            </div>
            <table id="questionsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>内容</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        
        <div id="answers" class="tab-content" style="display:none;">
            <h2>答案管理</h2>
            <table id="answersTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>题目ID</th>
                        <th>学生ID</th>
                        <th>答案</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        
        <div id="students" class="tab-content" style="display:none;">
            <h2>学生管理</h2>
            <div class="form-group">
                <input type="text" id="studentName" placeholder="学生姓名">
                <input type="text" id="studentId" placeholder="学号">
                <button onclick="addStudent()">添加学生</button>
            </div>
            <table id="studentsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script>
        // 显示选中的标签页
        function showTab(tabName) {
            const tabs = document.querySelectorAll('.tab-content');
            tabs.forEach(tab => {
                tab.style.display = 'none';
            });
            document.getElementById(tabName).style.display = 'block';
            refreshTable(tabName);
        }

        // 刷新表格数据
        function refreshTable(tableName) {
            fetch(`/api/${tableName}`, {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
                }
            })
                .then(response => response.json())
                .then(data => {
                    const tbody = document.querySelector(`#${tableName}Table tbody`);
                    tbody.innerHTML = '';
                    
                    data.forEach(item => {
                        const row = document.createElement('tr');
                        
                        for (const key in item) {
                            const cell = document.createElement('td');
                            cell.textContent = item[key];
                            row.appendChild(cell);
                        }
                        
                        // 添加操作按钮
                        if (tableName === 'questions' || tableName === 'students') {
                            const actionCell = document.createElement('td');
                            const deleteBtn = document.createElement('button');
                            deleteBtn.textContent = '删除';
                            deleteBtn.onclick = () => deleteItem(tableName, item.id);
                            actionCell.appendChild(deleteBtn);
                            row.appendChild(actionCell);
                        }
                        
                        tbody.appendChild(row);
                    });
                });
        }

        // 添加题目
        function addQuestion() {
            const content = document.getElementById('questionContent').value;
            
            fetch('/api/questions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ content })
            })
            .then(response => response.json())
            .then(data => {
                alert('添加成功');
                document.getElementById('questionContent').value = '';
                refreshTable('questions');
            });
        }

        // 添加学生
        function addStudent() {
            const name = document.getElementById('studentName').value;
            const studentId = document.getElementById('studentId').value;
            
            fetch('/api/direct-insert', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    table: 'students',
                    data: { name, student_id: studentId }
                })
            })
            .then(response => response.json())
            .then(data => {
                alert('添加成功');
                document.getElementById('studentName').value = '';
                document.getElementById('studentId').value = '';
                refreshTable('students');
            });
        }

        // 删除项目
        function deleteItem(table, id) {
            if (confirm('确定要删除吗？')) {
                fetch(`/api/${table}/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert('删除成功');
                    refreshTable(table);
                });
            }
        }

        // 初始化显示题目标签页
        showTab('questions');
    </script>
</body>
</html>